<template>
  <div style="width: 1100px;margin:0 auto">
    <h3 style="text-align: left">选择店铺</h3>
    <p class="b1" @click="logout()">退出当前账号</p>
    <br>

    <br>
    <div class="right">
      <el-input style="height:40px;width: 260px" :icon="Search" placeholder="请输入关键词搜索"></el-input>
      <el-button size="large" type="primary">搜索</el-button>
    </div>

    <div style="margin-top: 10px; padding-top: 10px">
      <!--      <el-slider v-model="size" />-->
      <!--      <el-space wrap :size="size">-->
      <el-row :gutter="10" v-for="item in 3">
        <el-col :span="8" v-for="item in 3" style="margin-top: 10px; padding-top: 10px">
          <el-card style="border-left-color: blue;border-left-width: 5px;height: 150px;width: 340px">
            <el-row :gutter="10">
              <el-col :span="18" style="text-align: left;font-size: large;"><p>朝阳路分店</p></el-col>
              <el-col :span="6"><el-button type="danger" plain="true">分店</el-button></el-col>
            </el-row>
            <el-row><el-icon><Stopwatch /></el-icon><span>有效期至2020/08/09</span>
            </el-row>
            <el-row><span>进入此门店</span>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!--        </el-space>-->
    </div>
    <div class="right">
      <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4 pagination-right"
      />
    </div>
  </div>

</template>

<script  setup>
import router from '@/router';
import {ref} from "vue";

const user = ref(localStorage.user?JSON.parse(localStorage.user):null);
const logout = ()=>{
  if (confirm("您确认退出登录吗?")){
    localStorage.clear();
    user.value=null;
    router.push('/login');
  }
}
</script>

<style scoped>
.right {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
}
.b1{
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
}
.b1:hover{
  color: dodgerblue;
}
</style>